.select {
  position: relative;
}

.placeholder {
  color: var(--Simple-Gray-Evening, #ababab);
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  /* 130% */
}

.hover {
  &:hover {
    .body {
      display: flex;
    }

    .chevron {
      transform: rotate(0.5turn);
    }
  }
}

.open:not(.disabled) {
  .body {
    display: flex;
  }

  .chevron {
    transform: rotate(0.5turn);
  }
}

.disabled {
  cursor: not-allowed;

  .placeholder {
    display: none;
  }
}

.IsFullWidth {
  width: 100%;
}

.item {
  all: unset;
  cursor: pointer;
  color: var(--gray-black, #000);
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 22px;
  padding: 12px 16px;
  align-items: center;
  gap: 8px;
  border-radius: 12px;

  &:hover:not(.active) {
    background: #f3f3f3;
  }
}

.itemWithFullWidth {
  all: unset;
  align-self: stretch;
  cursor: pointer;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
  padding: 16px;
  border-radius: 12px;

  &:hover:not(.active) {
    background: #f3f3f3;
  }
}

.withSmallFont {
  color: var(--Simple-Night, #000);
  font-size: 16px;
  font-style: normal;
  width: 93%;
  font-weight: 400;
  line-height: 22px;
  display: flex;
  padding: 12px 16px;

  &:hover {
    background: var(--Simple-Gray-Morning, #f3f3f3);
  }
}

.body {
  position: absolute;
  z-index: 10002;
  cursor: default;
  display: none;
  padding: 8px;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.08);
}

.bodyCenter {
  align-items: center;
  margin-top: 4px;
}

.close {
  display: none;
}

.select:has(.close) {
  .body {
    bottom: 0;
    display: none !important;
  }
}

.left {
  left: 0;
  text-align: start;
}

.right {
  right: 0;
  text-align: end;

  .item {
    justify-content: flex-end;
  }
}

.checked {
  width: 16px;
  height: 16px;
}

.active {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 12px;
  background: var(--pastel-blue, #ebf1fc);
}
